<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="用户姓名">
        <el-input v-model="listQuery.userName" />
      </el-form-item>

      <el-form-item label="登录名">
        <el-input v-model="listQuery.loginName" />
      </el-form-item>

      <el-form-item label="用户状态">
        <el-select v-model="listQuery.userState" placeholder="请选择" clearable>
        <el-option v-for="item in userStateSelect" :label="item.label" :value="item.value" :key="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getList(1)">搜索</el-button>
        <el-button type="primary" @click.native="getadd()">新增</el-button>
      </el-form-item>
    </el-form>

    <mytable ref="table" @getList="getList" :listQuery="listQuery">
      <el-table-column prop="userName" align="center" label="用户姓名"></el-table-column>
      <el-table-column prop="loginName" align="center" label="登录名"></el-table-column>
      <el-table-column prop="sex" align="center" label="性别"></el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <span v-html="scope.row.userStateStr"></span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="openEdit(scope.row)">修改基本信息</el-dropdown-item>
              <el-dropdown-item @click.native="reset(scope.row)">密码重置</el-dropdown-item>
              <el-dropdown-item @click.native="del(scope.row)">删除</el-dropdown-item>
              <el-dropdown-item @click.native="logoutUser(scope.row)">注销</el-dropdown-item>
              <el-dropdown-item @click.native="frozenUser(scope.row)">冻结</el-dropdown-item>
              <el-dropdown-item @click.native="recovery(scope.row)">恢复</el-dropdown-item>
              <el-dropdown-item @click.native="role(scope.row)">角色配置</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </mytable>

    <edit ref="edit" />
    <editLogout ref="editLogout" />
    <editFrozen ref="editFrozen" />
    <userAdd ref="userAdd" />
    <roledeploy ref="roledeploy" :key="time" />
  </div>
</template>

<script>
import edit from "./dialogEdit";
import editFrozen from "./dialogFrozen";
import editLogout from "./dialogLogout";
import apiUser from "@/api/baseManager/user";
import mytable from "@/components/Table";
import { confirm } from "@/utils/index";
import userAdd from "./dialogUserAdd";
import roledeploy from "./dialogRoleDeploy";
export default {
  name: "UserList",
  components: { edit, editLogout, editFrozen, userAdd, mytable, roledeploy },
  data() {
    return {
      time:'',
      listQuery: {
        userName: "",
        loginName: "",
        userState: 1,
        listLoading: true
      },
      userStateSelect: [] //用户状态下拉框
    };
  },
  created() {
    this.init(); //初始化页面数据
  },
  methods: {
    init() {
      this.userStateSelect = apiUser.getUserStateList();
    },
    getList(pageNo) {
      
      
      this.time = new Date().getTime()
      // 列表查询
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      apiUser.getUserList(this.listQuery).then(res => {
        console.log(res);
        this.$refs.table.load(res.list, res.total);
      });
    },

    // 状态
    userStateStr() {
      const data = apiUser.getState();
    },
    //新增
    getadd() {
      this.$refs.userAdd.open();
    },
    // 修改
    openEdit(row) {
      this.$refs.edit.openEdit(row.userId);
    },
    //删除
    del(row) {
      confirm("是否删除?").then(() => {
        let data = {
          userId: row.userId,
          userState: 3
        };
        apiUser.update(data).then(res => {
          this.$message({ type: "success", message: "删除成功！" });
          this.getList();
        });
      });
    },
    //注销
    logoutUser(row) {
      this.$refs.editLogout.open(row);
    },
    //冻结
    frozenUser(row) {
      this.$refs.editFrozen.open(row);
    },
    //重置
    reset(row) {
      confirm("确认重置密码？重置后密码为：itouch123").then(() => {
        apiUser.resetPwd(row.userId).then(res => {
          this.$message({ type: "success", message: "重置成功!" });
        });
      });
    },
    //恢复
    recovery(row) {
      confirm("是否确认恢复？").then(() => {
        let data = {
          userId: row.userId,
          userState: 1
        };
        apiUser.update(data).then(res => {
          this.$message({ type: "success", message: "恢复成功!" });
          this.getList();
        });
      });
    },
    //角色配置
    role(row) {
      this.$refs.roledeploy.open({userId:row.userId});
    }
  }
};
</script>

<style scoped>

</style>
